<template>
  <el-container style="height: 100%;">
    <el-aside width="auto">
      <compon-aside></compon-aside>
    </el-aside>
    <el-container>
      <el-header>
        <compon-header></compon-header>
      </el-header>
      <el-main style="padding: 10px">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
// @ is an alias to /src
import ComponAside from '@/components/ComponAside.vue'
import ComponHeader from '@/components/ComponHeader.vue'
import ComponTag from '@/components/ComponTag.vue'

export default {
  name: 'main',
  components: {
    ComponAside,
    ComponHeader,
    ComponTag
  }
}
</script>

<style lang="less">
body,html{margin: 0;padding: 0;background-color: #E9EEF3;}
#app{height: 100vh;}
.el-header {
    background-color: #B3C0D1;
    color: #f5f5f5;
    background-color: #333;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    padding: 10px;
  }
  .el-breadcrumb{
    color: white;
  }
</style>